﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
		<title>Text</title>
		<script src="js/jquery-1.7.1.min.js"></script>
		<link rel="stylesheet" href="css/jquery.mobile-1.4.3.min.css">
		<script src="js/jquery.mobile-1.4.3.min.js"></script>	
		<link rel="stylesheet" href="js/main.css">
		<script type="text/javascript" src="js/jsapi.js"></script>
		<script src="js/javascript.js"></script>
		<script type="text/javascript" src="js/nas_login.js"></script>	
		
		<!--載入必要Angularjs-->
		<script src="js/chart/angular.js"></script>
		<script src="js/chart/d3.js"></script>
		<script src="js/chart/nv.d3.js"></script>
		<script src="js/chart/angularjs-nvd3-directives.js"></script>
		<link rel="stylesheet" href="css/nv.d3.css" />
		<!--繪圖js-->
		<script src="js/chart/chart.js"></script>
	</head>
	<body ng-app='nvd3TestApp'>
		<div data-role="page" id='Overview'>
			<div data-role="header" data-position="fixed">
				<h1>Overview</h1>
				<a data-icon="grid" href='manu.html' data-ajax = 'false'>功能表</a>
			</div>
			<div data-role="content" >
				<!--Instances-->
				<div ng-controller="Instances">
					<h1><div align='center'>Instances</div></h1>
					<nvd3-pie-chart
					id="Ins"
					data="InstancesData"
					x="xFunction()"
					y="yFunction()"
					width="{{ width }}"
					height="{{ height }}"		
					showLabels="true"
					pieLabelsOutside="true"
					showValues="true"
					labelType="percent">
					<svg></svg>
					</nvd3-pie-chart>
					<h3><div align='center' id='Instances_Used'></div></h3>
					<h3><div align='center' id='Instances_Max'></div></h3>					
				</div>		
				
				<!--VCPUs-->				
				<div ng-controller="VCPUs">
					<h1><div align='center'>VCPUs</div></h1>
					<nvd3-pie-chart
					id="VCPUs"
					data="VCPUsData"
					x="xFunction()"
					y="yFunction()"
					width="{{ width }}"
					height="{{ height }}"		
					showLabels="true"
					pieLabelsOutside="true"
					showValues="true"
					labelType="percent">
					<svg></svg>
					</nvd3-pie-chart>
					<h3><div align='center' id='VCPUs_Used'></div></h3>
					<h3><div align='center' id='VCPUs_Max'></div></h3>					
				</div>	
				
				<!--RAM-->
				<div ng-controller="RAM">
					<h1><div align='center'>RAM</div></h1>
					<nvd3-pie-chart
					id="RAM"
					data="RAMData"
					x="xFunction()"
					y="yFunction()"
					width="{{ width }}"
					height="{{ height }}"		
					showLabels="true"
					pieLabelsOutside="true"
					showValues="true"
					labelType="percent">
					<svg></svg>
					</nvd3-pie-chart>
					<h3><div align='center' id='RAM_Used'></div></h3>
					<h3><div align='center' id='RAM_Max'></div></h3>						
				</div>	
				
				<!--Floating_IPs-->
				<div ng-controller="Floating_IPs">
					<h1><div align='center'>Floating IPs</div></h1>
					<nvd3-pie-chart
					id="Floating_IPs"
					data="Floating_IPsData"
					x="xFunction()"
					y="yFunction()"
					width="{{ width }}"
					height="{{ height }}"		
					showLabels="true"
					pieLabelsOutside="true"
					showValues="true"
					labelType="percent">
					<svg></svg>
					</nvd3-pie-chart>
					<h3><div align='center' id='Floating_IPs_Used'></div></h3>
					<h3><div align='center' id='Floating_IPs_Max'></div></h3>						
				</div>	
				
				<!--Security_Groups-->
				<div ng-controller="Security_Groups">
					<h1><div align='center'>Security Groups</div></h1>
					<nvd3-pie-chart
					id="Security_Groups"
					data="Security_GroupsData"
					x="xFunction()"
					y="yFunction()"
					width="{{ width }}"
					height="{{ height }}"		
					showLabels="true"
					pieLabelsOutside="true"
					showValues="true"
					labelType="percent">
					<svg></svg>
					</nvd3-pie-chart>
					<h3><div align='center' id='Security_Groups_Used'></div></h3>
					<h3><div align='center' id='Security_Groups_Max'></div></h3>					
				</div>	
				
				<!--Volumes-->
				<div ng-controller="Volumes">
					<h1><div align='center'>Volumes</div></h1>
					<nvd3-pie-chart
					id="Volumes"
					data="VolumesData"
					x="xFunction()"
					y="yFunction()"
					width="{{ width }}"
					height="{{ height }}"		
					showLabels="true"
					pieLabelsOutside="true"
					showValues="true"
					labelType="percent">
					<svg></svg>
					</nvd3-pie-chart>
					<h3><div align='center' id='Volumes_Used'></div></h3>
					<h3><div align='center' id='Volumes_Max'></div></h3>						
				</div>	
				
				<!--Volume_Storage-->
				<div ng-controller="Volume_Storage">
					<h1><div align='center'>Volume Storage</div></h1>
					<nvd3-pie-chart
					id="Volume_Storage"
					data="Volume_StorageData"
					x="xFunction()"
					y="yFunction()"
					width="{{ width }}"
					height="{{ height }}"		
					showLabels="true"
					pieLabelsOutside="true"
					showValues="true"
					labelType="percent">
					<svg></svg>
					</nvd3-pie-chart>
					<h3><div align='center' id='Volume_Storage_Used'></div></h3>
					<h3><div align='center' id='Volume_Storage_Max'></div></h3>						
				</div>					
			</div>		
			<div data-role="footer" data-position="fixed">
				<h1>Overview</h1>
			</div>
		</div>	
	</body>
</html>	